<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.global.js"></script>
</head>
<body>
      <!-- <div id="app">
        //添加字符串用引号 
        <input type="text" v-focus="'abc'"> 
        //添加变量不用
        <input type="text" v-focus="html">
        {{result}}
      </div> -->

      <div id="app">
        <input type="text" v-model="num1"> 
        <input type="text" v-model="num2">
        {{result}}
      </div>

</body> 

<script>
    //计算属性
    //倾听方法
    const App = {
            data() {
                return {
                    textarea:'',
                    msg:'msg',
                    html:"<h2>111</h2>",
                    num1: 0,
                    num2: 0,
                    name: ''
                }
            },
            watch: {
                num1(newValue,oldValue) {
                    console.log(newValue,oldValue)
                }
            },
            computed: {
                result() {
                    //return this.num1 + this.num2//拼接

                    return parseInt(this.num1) + parseInt(this.num2)//计算
                }
            },
            methods:{   

            },
            beforeCreate() {
               console.log('beforeCreate')
               console.dir(new Date().getTime())
            },
            created() {
               console.log('created')
            },
            directives: {
               focus: {
                    // 当被绑定的元素挂载到 DOM 中时……
                    mounted(el,binding) {
                    //el 第一个返回的参数是dom节点
                    // 聚焦元素 原生js方法
                    console.dir(binding)
                    el.focus()
                    el.value = binding.value
                    console.log('mounted')
                },created(){
                    console.log('created')
                    },

                }
            }
            }
            const app =  Vue.createApp(App)
                // 注册一个全局自定义指令 使用时：v-focus
                app.directive('focus', {
                // 当被绑定的元素挂载到 DOM 中时……
                // mounted(el,binding) {
                //     //el 第一个返回的参数是dom节点
                //     // 聚焦元素 原生js方法
                //     console.dir(binding)
                //     el.focus()
                //     el.value = binding.value
                //     console.log('mounted')
                // },created(){
                //     console.log('created')
                // },
            })
            app.mount('#app')
</script>
</html>